<template>
  <div class="pop-mv">
    <slot name='title'></slot>
    <ul class="pop-mv-list">
      <li 
        v-if='isLoading'
        class="isLoading-li">
        <com-loading :loadingPre='loadingPre'></com-loading>
      </li>
      <li 
        v-for='item,index in mvList'
        :key = 'item.movieId == undefined ? item.id+index : item.movieId+index'
        @click="gotoPage(item.movieId,item.id)">
        <div class="photo">
          <img :src="item.poster == undefined ? item.img.replace('w.h','170.230') : item.poster" alt="" />
          <div class="mv-point" v-if='item.score != undefined && item.score > 0'>观众评分 {{item.score}}</div>
          <div class="mv-point" v-if='item.score == undefined || item.score <= 0'>{{item.wish}}人想看</div>
        </div>
        <div class="mv-title" v-if='item.name != undefined && item.name.length > 0'>{{item.name}}</div>
        <div class="mv-title" v-if='item.nm != undefined && item.nm.length > 0'>{{item.nm}}</div>
        <div class="mv-date" v-if='item.comingTitle != undefined && item.comingTitle.length > 0'>{{item.comingTitle.split(' ')[0]}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import comLoading from '@/components/comLoading.vue'
export default {
  name: "popMv",
  props: {
        mvList: Array,
        isLoading: Boolean,
        loadingPre: Number, //加载的进度
  },
  components: {
    comLoading
  },
  methods: {
    gotoPage(url1,url2){
      var url = url1 == undefined ? url2 : url1;
      this.$router.push('/movie_detail/'+url+'/required');
    }
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.pop-mv {
  padding: 10px;
  font-size: 18px;
}
.pop-mv-list {
  // width: 1310px;
  padding-top: 10px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
  li {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    position: relative;
    &:last-child {
      margin-right: 0;
    }
    &.isLoading-li {
        width: 100%;
        height: 164px;
    }
  }
  .photo {
    position: relative;
    width: 100px;
    height: 136px;
  }
  .mv-point {
    width: 100%;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    padding-left: 4px;
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, 1));;
    position: absolute;
    font-size: 12px;
    color: $fontColor2;
    font-weight: bold;
    bottom: 0px;
  }
  img {
    width: 100px;
    height: 136px;
  }
  .mv-title {
    margin-top: 6px;
    font-size: 16px;
    font-weight: bold;
    width: 100px;
    text-overflow:ellipsis;  /*文本裁切 显示省略号*/
    white-space: nowrap;  /*强制文本不换行*/
    overflow: hidden;  /*溢出文本隐藏*/
  }
  .mv-date {
    width: 100px;
    font-size: 12px;
    color: #888;
    overflow: hidden;
    white-space:nowrap;
  }
}
</style>